<template>
  <div class="page">
    <div class="mid">
      <div class="midCard">
        <div class="card_header">
          <div class="left">
            <img src="../../assets/index/21.png" alt="" class="icon" />
            <span class="title">待审核</span>
          </div>
        </div>
        <div class="header">
          <div class="card" @click="navigatorTo(1)">
            <div class="right">
              <img src="../../assets/index/2.png" alt="" style="width: 56px; height: 56px" />
            </div>
            <div class="left">
              <span class="num">{{ hotelBacklog }}</span>
              <span class="name">酒店民宿待审核</span>
            </div>
          </div>
          <div class="card" @click="navigatorTo(2)">
            <div class="right">
              <img src="../../assets/index/3.png" alt="" style="width: 56px; height: 56px" />
            </div>
            <div class="left">
              <span class="num">{{ merchantBacklog }}</span>
              <span class="name">商户入驻待审核</span>
            </div>
          </div>
          <div class="card" @click="navigatorTo(3)">
            <div class="right">
              <img src="../../assets/index/4.png" alt="" style="width: 56px; height: 56px" />
            </div>
            <div class="left">
              <span class="num">{{ strategyBacklog }}</span>
              <span class="name">旅游攻略待审核</span>
            </div>
          </div>
        </div>
      </div>
      <div class="midCard">
        <div class="card_header">
          <div class="left">
            <img src="../../assets/index/22.png" alt="" class="icon" />
            <span class="title">用户投诉</span>
          </div>
        </div>
        <div class="header">
          <div class="card" style="width: auto; margin-right: 48px; min-width: 95px;cursor: default">
            <div class="left ts">
              <span class="num">{{ yhtstj.totalNum }}</span>
              <span class="name">投诉总数</span>
            </div>
          </div>
          <div class="card" @click="navigatorTo(4)">
            <div class="right">
               <el-progress type="circle" color="#FF4141" :width="56" v-if="yhtstj.totalNum"
                :percentage="Number(parseFloat((yhtstj.pendingProcessing / yhtstj.totalNum) * 100).toFixed(2))"></el-progress>
              <el-progress type="circle" color="#FF4141" :width="56" v-else
                :percentage="0"></el-progress>
            </div>
            <div class="left">
              <span class="num">{{ yhtstj.pendingProcessing }}</span>
              <span class="name">待处理 </span>
            </div>
          </div>
          <div class="card" @click="navigatorTo(5)">
            <div class="right">
               <el-progress type="circle" color="# FEB105" :width="56" v-if="yhtstj.totalNum" :percentage="Number(parseFloat(
                (yhtstj.Processing / yhtstj.totalNum) * 100
              ).toFixed(2)
              )"></el-progress>
              <el-progress type="circle" color="# FEB105" :width="56" v-else :percentage="0"></el-progress>
            </div>
            <div class="left">
              <span class="num">{{ yhtstj.Processing }}</span>
              <span class="name">处理中 </span>
            </div>
          </div>
          <div class="card" @click="navigatorTo(6)">
            <div class="right">
                <el-progress type="circle" color="#0866F2" :width="56" v-if="yhtstj.totalNum" :percentage="Number(parseFloat((yhtstj.resolved / yhtstj.totalNum) * 100).toFixed(
                2
              )
              )"></el-progress>
              <el-progress type="circle" color="#0866F2" :width="56" v-else :percentage="0"></el-progress>
            </div>
            <div class="left">
              <span class="num">{{ yhtstj.resolved }}</span>
              <span class="name">已解决</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom" style="margin-bottom: 10px">
      <div class="card_header">
        <div class="left">
          <img src="../../assets/index/16.png" alt="" class="icon" />
          <span class="title">用户统计</span>
        </div>
      </div>
      <div class="sailSituation">
        <div class="item">
          <p>{{ info.pv || 0 }} / {{ info.uv || 0 }}</p>
          <p>访问用户量(pv/uv)</p>
        </div>
        <div class="item">
          <p>￥{{ info.totalAmount || 0 }}</p>
          <p>交易总金额</p>
        </div>
        <div class="item">
          <p>{{ info.refundNum || 0 }}</p>
          <p>退款数量</p>
        </div>
        <div class="item">
          <p>￥{{ info.refundAmount || 0 }}</p>
          <p>退款总金额</p>
        </div>
        <div class="item">
          <p>{{ info.paidUserNum || 0 }}</p>
          <p>支付用户数</p>
        </div>
        <div class="item">
          <p>{{ info.totalNum || 0 }}</p>
          <p>支付订单数</p>
        </div>
      </div>
      <div id="personIncNum" ref="personIncNum" class="lineChart"></div>
    </div>
    <div class="mid">
      <div class="midCard">
        <div class="card_header">
          <div class="left">
            <img src="../../assets/index/6.png" alt="" class="icon" />
            <span class="title">船票概况</span>
          </div>
          <!-- <div class="right">查看详情 ></div> -->
        </div>
        <div class="sailSituation">
          <!-- 当日船票卖出情况
          <span style="margin: 0 10px; font-size: 22px; font-weight: bold">{{
            personCountSum
          }}</span>
          张 -->
          <div class="item">
            <p>{{ personCountSum || 0 }}</p>
            <p>当日售票总数</p>
          </div>
          <div class="item">
            <p>￥{{ personCountSum2 || 0 }}</p>
            <p>当日交易金额</p>
          </div>
          <div class="item">
            <p>{{ personCountSum3 || 0 }}</p>
            <p>当日退款数量</p>
          </div>
          <div class="item">
            <p>￥{{ personCountSum4 || 0 }}</p>
            <p>当日退款金额</p>
          </div>
        </div>
        <div class="chart">
          <span class="title1">各码头船票卖出情况</span>
          <div class="chart_div" style="height: 320px">
            <div ref="sailSumPie" class="sailSumPie"></div>
            <div class="table">
              <el-table :data="shipTable" style="width: 100%" :max-height="260" header-align="center" align="center">
                <el-table-column prop="itemStyle.color" width="38" align="center">
                  <template slot-scope="scope">
                    <span :style="{
                      display: 'inline-block',
                      backgroundColor: scope.row.itemStyle.color,
                      width: '10px',
                      height: '10px',
                      borderRadius: '5px',
                    }">
                    </span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="码头" width="100">
                </el-table-column>
                <el-table-column align="center" prop="value" label="售出票数" width="100">
                </el-table-column>
                <el-table-column align="center" prop="shipFee" label="交易金额" width="150">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="midCard">
        <div class="card_header">
          <div class="left">
            <img src="../../assets/index/7.png" alt="" class="icon" />
            <span class="title">酒店民宿概况</span>
          </div>
          <!-- <div class="right">查看详情 ></div> -->
        </div>
        <div class="sailSituation">
          <div class="item">
            <p>{{ mstj.todayOrders || 0 }}</p>
            <p>当日订单总数</p>
          </div>
          <div class="item">
            <p>￥{{ mstj.todayOrderAmount || 0 }}</p>
            <p>当日交易金额</p>
          </div>
          <div class="item">
            <p>{{ mstj.todayRefunds || 0 }}</p>
            <p>当日退款数量</p>
          </div>
          <div class="item">
            <p>￥{{ mstj.todayRefundAmount || 0 }}</p>
            <p>当日退款金额</p>
          </div>
        </div>

        <div class="chart">
          <div class="sailSituation2">
            <span style="margin-right: 15px">
              当日入住人数
              <span style="margin: 0 10px; font-size: 22px; font-weight: bold">{{ todayCheckinNums }}</span>
              人</span>
            <span style="margin-right: 15px">
              当月入住人数
              <span style="margin: 0 10px; font-size: 22px; font-weight: bold">{{ thisMonthCheckinNums }}</span>
              人</span>
            <span>
              民宿空房情况
              <span style="margin: 0 10px; font-size: 22px; font-weight: bold">{{ vacantRooms }}</span>
              间</span>
          </div>
          <span class="title1">各区域入住情况</span>
          <div ref="checkInSituation" class="sailSumPie" style="width: 100%"></div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="card_header">
        <div class="left">
          <img src="../../assets/index/8.png" alt="" class="icon" />
          <span class="title">游客概况</span>
        </div>
        <!-- <div class="right">查看详情 ></div> -->
      </div>
      <div class="main_mid">
        <span class="title1">入岛游客年龄分布</span>
        <div class="ageDistributionList">
          <div class="ageDistribution">
            <div class="ageDistribution_left">
              <div class="font1">0~17岁</div>
              <div class="sum">
                <span style="margin: 10px 0; display: inline-block"> 总计</span><br />
                <span class="font1">{{ ageDistributionList.childNum }}</span> 人
              </div>
            </div>
            <div id="pieOne" class="ageDistributionPie"></div>
          </div>
          <div class="ageDistribution">
            <div class="ageDistribution_left">
              <div class="font1">18~45岁</div>
              <div class="sum">
                <span style="margin: 10px 0; display: inline-block"> 总计</span><br />
                <span class="font1">{{ ageDistributionList.youngNum }}</span> 人
              </div>
            </div>
            <div id="pieTwo" class="ageDistributionPie"></div>
          </div>
          <div class="ageDistribution">
            <div class="ageDistribution_left">
              <div class="font1">45~59岁</div>
              <div class="sum">
                <span style="margin: 10px 0; display: inline-block"> 总计</span><br />
                <span class="font1">{{ ageDistributionList.midNum }}</span> 人
              </div>
            </div>
            <div id="pieThree" class="ageDistributionPie"></div>
          </div>
          <div class="ageDistribution">
            <div class="ageDistribution_left">
              <div class="font1">60岁以上</div>
              <div class="sum">
                <span style="margin: 10px 0; display: inline-block"> 总计</span><br />
                <span class="font1">{{ ageDistributionList.oldNum }}</span> 人
              </div>
            </div>
            <div id="pieFour" class="ageDistributionPie"></div>
          </div>
          <div class="ageDistribution">
            <div class="ageDistribution_left">
              <div class="font1">男性</div>
              <div class="sum">
                <span style="margin: 10px 0; display: inline-block"> 总计</span><br />
                <span class="font1">{{ ageDistributionList.boyNum }}</span> 人
              </div>
            </div>
            <div id="pieFive" class="ageDistributionPie"></div>
          </div>
          <div class="ageDistribution">
            <div class="ageDistribution_left">
              <div class="font1">女性</div>
              <div class="sum">
                <span style="margin: 10px 0; display: inline-block"> 总计</span><br />
                <span class="font1">{{ ageDistributionList.girlNum }}</span> 人
              </div>
            </div>
            <div id="pieSix" class="ageDistributionPie"></div>
          </div>
        </div>
      </div>
      <div class="main_bottom">
        <div class="fromStatistics pt5">
          <span class="title1">入岛游客来源分布</span>
          <div class="fromStatistics_main">
            <div class="left">
              <el-table :data="tableData" style="width: 50%" :max-height="350" header-align="center" align="center">
                <el-table-column prop="index" label="排名" width="100" align="center">
                  <template slot-scope="scope">
                    <span class="bg1" v-if="scope.row.index == 1"></span>
                    <span class="bg2" v-else-if="scope.row.index == 2"></span>
                    <span class="bg3" v-else-if="scope.row.index == 3"></span>
                    <span class="bg" v-else>{{ scope.row.index }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="provinceName" label="地区" width="130">
                </el-table-column>
                <el-table-column align="center" prop="personNum" label="人数" width="100">
                </el-table-column>
                <el-table-column align="center" prop="ratio" label="占比" width="100">
                </el-table-column>
              </el-table>
            </div>
            <div class="right">
              <div class="days">
                当日入岛游客<br />
                <span style="
                    display: inline-block;
                    margin-top: 15px;
                    font-size: 20px;
                    font-weight: 700;
                  ">{{ dayVsNum }}</span>
              </div>
              <div class="month">
                当月入岛游客<br />
                <span style="
                    display: inline-block;
                    font-size: 24px;
                    font-weight: 700;
                    margin-top: 15px;
                  ">{{ monthVsNum }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="enterNum pt5">
          <span class="title1">各区域进入游客</span>
          <div id="fromStatistics" ref="fromStatistics" class="fromStatisticsChart"></div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="card_header">
        <div class="left">
          <img src="../../assets/index/9.png" alt="" class="icon" />
          <span class="title">商家概况</span>
        </div>
        <!-- <div class="right">查看详情 ></div> -->
      </div>
      <div class="digitalShow">
        <div class="left">
          <span>入驻商家总数<span style="
                vertical-align: middle;
                margin-left: 5px;
                color: #1372ff;
                font-weight: bold;
                font-size: 24px;
              ">{{ MerchantOverview.totalNums }}</span></span>
          <span>通过审核商家<span style="
                vertical-align: middle;
                margin-left: 5px;
                color: #1dca68;
                font-weight: bold;
                font-size: 24px;
              ">{{ MerchantOverview.passNums }}</span></span>
          <span>未通过审核商家<span style="
                vertical-align: middle;
                margin-left: 5px;
                color: #ed5656;
                font-weight: bold;
                font-size: 24px;
              ">{{ MerchantOverview.unPassedNums }}</span></span>
          <span>待审核商家<span style="
                vertical-align: middle;
                margin-left: 5px;
                color: #ff9b17;
                font-weight: bold;
                font-size: 24px;
              ">{{ MerchantOverview.waitNums }}</span></span>
        </div>
        <div class="right">
          <el-select size="mini" @change="timeChange" v-model="chooseValue" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>

      <div id="lineChart" ref="lineChart" class="lineChart"></div>
    </div>
    <div class="bottom">
      <div class="card_header">
        <div class="left">
          <img src="../../assets/index/16.png" alt="" class="icon" />
          <span class="title">景区概况</span>
        </div>
      </div>
      <div class="sailSituation">
        <div class="item">
          <p>{{ sceniInfo.curOrderCount }}</p>
          <p>当日订单数</p>
        </div>
        <div class="item">
          <p>￥{{ sceniInfo.curOrderMoney || 0 }}</p>
          <p>当日订单金额</p>
        </div>
        <div class="item">
          <p>{{ sceniInfo.curRefundCount || 0 }}</p>
          <p>当日退款数</p>
        </div>
        <div class="item">
          <p>￥{{ sceniInfo.curRefundMoney || 0 }}</p>
          <p>当日退款金额</p>
        </div>
        <div class="item">
          <p>{{ sceniInfo.curWriteOffCount || 0 }}</p>
          <p>当日核销量</p>
        </div>
      </div>
      <div id="lineChart2" ref="lineChart2" class="lineChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      options: [
        {
          label: "近一月",
          value: 1,
        },
        {
          label: "近一年",
          value: 2,
        },
      ],
      chooseValue: 1,
      dynamicStyles: {
        display: "inline-block",
        backgroundColor: "red",
        width: "10px",
        height: "10px",
        borderRadius: "5px",
      },
      shipTable: [],
      ageDistributionList: {
        youngRatio: 0,
        oldRatio: 0,
        midRatio: 0,
        girlRatio: 0,
        childRatio: 0,
        boyRatio: 0,
        boyNum: 0,
        youngNum: 0,
        oldNum: 0,
        midNum: 0,
        girlNum: 0,
        childNum: 0,
      },
      MerchantOverview: {
        totalNums: 0,
        passNums: 0,
        unPassedNums: 0,
        waitNums: 0,
        xAxisData: [],
        passNumsData: [],
        unPassedNumsData: [],
        waitNumsData: [],
      },
      sceniInfo: {
        curOrderCount: 0,
        curOrderMoney: 0,
        curRefundCount: 0,
        curRefundMoney: 0,
        curWriteOffCount: 0,
        islandTradeAmountList: [],
      },
      scenicOptions: [
        { scenicName: "六合朝阳景区" },
        { scenicName: "东崖绝壁" },
        { scenicName: "赤膊山景区" },
        { scenicName: "基湖沙滩" },
        { scenicName: "南长途沙滩" },
        { scenicName: "三大王沙滩" },
        { scenicName: "元宝山" },
      ],
      dayVsNum: 0,
      monthVsNum: 0,
      personCountSum: 0,
      personCountSum2: 0,
      personCountSum3: 0,
      personCountSum4: 0,
      thisMonthCheckinNums: 0,
      todayCheckinNums: 0,
      vacantRooms: 0,
      hotelBacklog: 0,
      merchantBacklog: 0,
      notesBacklog: 0,
      strategyBacklog: 0,
      tableData: [],
      sumTicket: {
        islandName: [
          "联庄村",
          "唐家堡村",
          "小山村",
          "高泉村",
          "寒树村",
          "寒水村",
          "中化村 ",
          "金华村",
          "好地掌村",
          "庙川村",
        ],
        vacantRooms: [200, 340, 320, 220, 360, 300, 160, 400, 250, 280],
        checkinRooms: [160, 300, 280, 180, 300, 240, 120, 340, 200, 250],
      },
      sailSumEvent: [
        {
          value: 3,
          name: "嵊泗(黄龙)",
          itemStyle: {
            color: "#7795F2",
          },
        },
        {
          value: 2,
          name: "嵊泗(沈家湾)",
          itemStyle: {
            color: "#53628F",
          },
        },
        {
          value: 1,
          name: "嵊泗(大洋)",
          itemStyle: {
            color: "#53628F",
          },
        },
      ],
      mstj: {
        entered: 0,
        thisMonthCheckinNums: 8,
        todayCheckinNums: 0,
        todayOrderAmount: 0,
        todayOrders: 0,
        todayRefundAmount: 0,
        todayRefunds: 0,
        vacantRooms: 33,
      },
      yhtstj: {
        Processing: 0,
        pendingProcessing: 0,
        resolved: 0,
        totalNum: 9,
      },
      toWhere: {
        xAxisName: [],
        dayVsNum: [],
      },
      info: {
        totalAmount: 0,
        refundAmount: 0,
        paidUserNum: 0,
        totalNum: 0,
        refundNum: 0,
        pv: 0,
        uv: 0,
      },
    };
  },
  created() {
    this.getBacklogInfo();
    this.getShipOverview();
    this.getHotelOverview();
    this.getComplaintOverview();

    this.getIslandCheckinList();
    this.getVisitorOverview();
    this.getMerchantOverview();
  },
  mounted() {
    this.setSailSumPie();
    this.setCheckInSituation();
    this.ageDistributionPieOne();
    this.ageDistributionPieTwo();
    this.ageDistributionPieThree();
    this.ageDistributionPieFive();
    this.ageDistributionPieFour();
    this.ageDistributionPieSix();
    this.setBusinessOverview();
    this.setFromStatistics();
    this.getScenicOverview();
    this.getdataOverview();
    this.getdataOverview2();
  },
  beforeDestroy() {
    window.removeEventListener("resize", () => { }); // 移除resize 事件监听器
  },
  methods: {
    //用户统计数据
    getdataOverview2() {
      this.$http.post("ueba/mdmpv/queryStatisticInfo").then((res) => {
        console.log(2222);
        console.log(res);
        if (res.data.code == 0) {
          this.info.pv = res.data.data.pvNum;
          this.info.uv = res.data.data.uvNum;
        }
      });
    },
    getdataOverview() {
      this.$http.post("sys/homeoverview/userStatisticInfo").then((res) => {
        console.log(res.data.data);
        this.dataListLoading = false;
        if (res.data.code == 0) {
          this.info.paidUserNum = res.data.data.head.paidUserNum;
          this.info.totalAmount = res.data.data.head.totalAmount;
          this.info.refundNum = res.data.data.head.refundNum;
          this.info.refundAmount = res.data.data.head.refundAmount;
          this.info.totalNum = res.data.data.head.totalNum;
          let x = [],
            userData = [];
          if (res.data.data.trendList) {
            for (let i = 0; i < res.data.data.trendList.length; i++) {
              x.push(res.data.data.trendList[i].dateStr);
              userData.push(res.data.data.trendList[i].personIncNum);
            }
          }
          //金额
          // this.x = x;
          // this.userData = userData;
          setTimeout(() => {
            this.personIncNumLine(x, userData, "personIncNum");
          }, 500);
        }
      });
    },
    personIncNumLine(xLabel, y, name) {
      let myChart = echarts.init(this.$refs[name]);
      const option = {
        title: {
          textStyle: {
            color: "#111",
            fontSize: 16,
          },
          x: "4%",
          y: "5px",
          text: "用户数量",
        },
        color: ["#1DCA68", "#ED5555"],
        tooltip: {
          trigger: "axis",
          borderWidth: 2,
          padding: [5, 10],
        },
        grid: {
          top: "20%",
          left: "6%",
          right: "30px",
          bottom: "10%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            name: "",
            nameGap: 10,
            nameTextStyle: {
              // ---坐标轴名称样式
              color: "#111",
              fontSize: 15,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#111", // 更改坐标轴文字颜色
                fontSize: 12, // 更改坐标轴文字大小
              },
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#7299D4",
              },
            },
            axisTick: {
              show: false,
            },
            data: xLabel,
          },
        ],
        yAxis: [
          {
            interval: 500, // 设置Y轴的间隔为500
            name: "单位：人",
            splitLine: {
              show: true,
              lineStyle: {
                type: [5, 10],
                dashOffset: 10,
                color: "#C6D7F1",
              },
            },
            min: function (value) {
              return 0;
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#111", // 更改坐标轴文字颜色
                fontSize: 12, // 更改坐标轴文字大小
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#7299D4",
              },
            },
          },
        ],
        series: [
          {
            name: "用户数量",
            type: "line",
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            data: y,
          },
        ],
      };
      myChart.setOption(option);
    },
    navigatorTo(type) {
      switch (type) {
        case 1:
          this.$router.push("/companyCenter-noCheckHotelList");
          break;
        case 2:
          this.$router.push("/businessManage-noCheckList");
          break;
        case 3:
          this.$router.push("/introduction-noCheckList");
          break;
        case 4:
          this.$router.push("/adviceManage-index?state=[0]");
          break;
        case 5:
          this.$router.push("/adviceManage-index?state=[1,2,4]");
          break;
        case 6:
          this.$router.push("/adviceManage-index?state=[3,5,6]");
          break;
      }
    },
    timeChange(e) {
      if (e == 1) {
        this.getMerchantOverview();
      } else {
        this.getMerchantOverview(2);
      }
    },

    getMerchantOverview(type = 1) {
      (this.MerchantOverview = {
        totalNums: 0,
        passNums: 0,
        unPassedNums: 0,
        waitNums: 0,
        xAxisData: [],
        passNumsData: [],
        unPassedNumsData: [],
        waitNumsData: [],
      }),
        this.$http
          .post("/sys/workbench/getMerchantOverview/" + type)
          .then(({ data: res }) => {
            if (res.code == 0) {
              this.MerchantOverview.totalNums = res.data.totalNums;
              this.MerchantOverview.passNums = res.data.passNums;
              this.MerchantOverview.unPassedNums = res.data.unPassedNums;
              this.MerchantOverview.waitNums = res.data.waitNums;
              res.data.merchantList.forEach((item, index) => {
                if (type == 1) {
                  this.MerchantOverview.xAxisData.push(item.dateDay + "日");
                } else {
                  this.MerchantOverview.xAxisData.push(item.dateDay + "月");
                }
                this.MerchantOverview.passNumsData.push(item.passNums);
                this.MerchantOverview.unPassedNumsData.push(item.unPassedNums);
                this.MerchantOverview.waitNumsData.push(item.waitNums);
              });
              console.log('this.MerchantOverview', this.MerchantOverview);

              this.setBusinessOverview();
            } else {
              this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          });
    },
    getVisitorOverview() {
      this.$http
        .post("/sys/workbench/selectVisitorSurvey")
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.monthVsNum = res.data.allIslandVsNum.monthVsNum;
            this.dayVsNum = res.data.allIslandVsNum.dayVsNum;
            this.ageDistributionList.boyNum = res.data.alldayFeature.boyNum;
            this.ageDistributionList.childNum = res.data.alldayFeature.childNum;
            this.ageDistributionList.girlNum = res.data.alldayFeature.girlNum;
            this.ageDistributionList.midNum = res.data.alldayFeature.midNum;
            this.ageDistributionList.oldNum = res.data.alldayFeature.oldNum;
            this.ageDistributionList.youngNum = res.data.alldayFeature.youngNum;
            this.ageDistributionList.boyRatio = res.data.alldayFeature.boyRatio;
            this.ageDistributionList.childRatio =
              res.data.alldayFeature.childRatio;
            this.ageDistributionList.girlRatio =
              res.data.alldayFeature.girlRatio;
            this.ageDistributionList.midRatio = res.data.alldayFeature.midRatio;
            this.ageDistributionList.oldRatio = res.data.alldayFeature.oldRatio;
            this.ageDistributionList.youngRatio =
              res.data.alldayFeature.youngRatio;
            this.tableData = res.data.province;
            this.tableData.forEach((item, index) => {
              item.index = index + 1;
            });
            this.toWhere.xAxisName = res.data.surveyList.map((i) => {
              return i.islandName;
            });
            this.toWhere.dayVsNum = res.data.surveyList.map((i) => {
              return i.dayVsNum;
            });
            this.toWhere.monthVsNum = res.data.surveyList.map((i) => {
              return i.monthVsNum;
            });
            this.setFromStatistics();
            this.ageDistributionPieOne();
            this.ageDistributionPieTwo();
            this.ageDistributionPieThree();
            this.ageDistributionPieFour();
            this.ageDistributionPieFive();
            this.ageDistributionPieSix();
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        });
    },
    getIslandCheckinList() {
      this.$http
        .post("/sys/workbench/getIslandCheckinList")
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.sumTicket.islandName = res.data.map((item, index) => {
              return item.islandName;
            });
            this.sumTicket.vacantRooms = res.data.map((item, index) => {
              return item.vacantRooms;
            });
            this.sumTicket.checkinRooms = res.data.map((item, index) => {
              return item.checkinRooms;
            });
            this.setCheckInSituation();
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        });
    },
    //景区门票概况
    getScenicOverview() {
      this.$http
        .get("/sys/workbench/getScenicOverview")
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.sceniInfo = res.data;
            console.log(res.data);
            this.setScenicOverview(
              this.scenicOptions,
              res.data.islandTradeAmountList
            );
          }
        });
    },
    //酒店民宿统计
    getHotelOverview() {
      this.$http
        .post("/sys/workbench/getHotelOverview")
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.mstj = res.data;
            this.thisMonthCheckinNums = res.data.thisMonthCheckinNums;
            this.todayCheckinNums = res.data.todayCheckinNums;
            this.vacantRooms = res.data.vacantRooms;
            this.setSailSumPie();
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        });
    },
    //用户投诉
    getComplaintOverview() {
      this.$http
        .get("/sys/workbench/getComplaintOverview")
        .then(({ data: res }) => {
          if (res.code == 0) {
            console.log(9999);
            console.log(res.data);
            this.yhtstj = res.data;
          }
        });
    },
    //
    getShipOverview() {
      this.$http
        .post("/sys/workbench/todayShipOverview")
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.personCountSum = res.data.reduce((acc, cur) => {
              return acc + cur.personCount;
            }, 0);
            this.personCountSum2 = res.data.reduce((acc, cur) => {
              return acc + cur.shipFee;
            }, 0);
            this.personCountSum3 = res.data.reduce((acc, cur) => {
              return acc + cur.quitCount;
            }, 0);
            this.personCountSum4 = res.data.reduce((acc, cur) => {
              return acc + cur.quitShipFee;
            }, 0);
            const arr = [];
            const color = [
              "#ff596b",
              "#ff808e",
              "#ffccd2",
              "#ff9f40",
              "#ffbf7f",
              "#ffe5cc",
              "#0be076",
              "#70e0a8",
              "#b4e0ca",
              "#4c94fe",
              "#7eb1fc",
              "#cadefc",
              "#4d4cff",
              "#8080ff",
              "#ccccff",
              "#20d9c6",
              "#6cd9ce",
              "#add9d4",
              "#ffc718",
              "#ffdf80",
              "#fff2cc",
            ];
            res.data.forEach((item) => {
              let randomNum = Math.floor(Math.random() * 21);
              if (item.personCount == 0) {
                arr.push({
                  name: item.endPortName,
                  value: item.personCount,
                  shipFee: item.shipFee,
                  itemStyle: {
                    color: "#DEE0E3",
                  },
                });
              } else {
                arr.push({
                  name: item.endPortName,
                  value: item.personCount,
                  shipFee: item.shipFee,
                  itemStyle: {
                    color: color[randomNum],
                  },
                });
              }
            });
            this.sailSumEvent = arr;
            this.shipTable = arr;
            this.setSailSumPie();
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        });
    },
    getBacklogInfo() {
      this.$http.post("/sys/workbench/getBacklogInfo").then(({ data: res }) => {
        if (res.code == 0) {
          this.hotelBacklog = res.data.hotelBacklog;
          this.merchantBacklog = res.data.merchantBacklog;
          this.notesBacklog = res.data.notesBacklog;
          this.strategyBacklog = res.data.strategyBacklog;
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    indexMethod(index) {
      return index;
    },
    // 各码头船票卖出情况
    setSailSumPie() {
      let myChart = echarts.init(this.$refs.sailSumPie);
      var m2R2Data = this.sailSumEvent;
      let option = {
        grid: {
          left: "5%",
          top: "10%",
          right: "30%",
          bottom: "10%",
        },
        title: [
          {
            text: this.personCountSum,
            textStyle: {
              fontSize: 20,
              color: "#293C73",
            },
            top: "40%",
            x: "center",
          },
          {
            text: "卖出总数",
            textStyle: {
              fontSize: 14,
              color: "#293C73",
              fontWeight: "400",
            },
            top: "55%",
            x: "center",
          },
        ],
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: "scroll",
          // 是否横向展示
          // orient: 'vertical',
          // left: '65%',
          align: "left",
          // top: 'middle',
          textStyle: {
            color: "#8C8C8C",
          },
          x: "center",
          y: "650",
        },
        series: [
          {
            // 是否需要在鼠标移上去展示
            // name: nametext,
            type: "pie",
            // center: ['35%', '50%'],
            radius: ["50%", "80%"],
            // clockwise: false, //饼图的扇区是否是顺时针排布
            // avoidLabelOverlap: false,
            itemStyle: {
              //图形样式
              normal: {
                borderRadius: 10,
                borderColor: "#ffffff",
                borderWidth: 1,
              },
            },

            label: {
              show: false,
              // position: 'center'
            },

            data: m2R2Data,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 各岛屿入住情况
    setCheckInSituation() {
      let myChart = echarts.init(this.$refs.checkInSituation);
      let islandName = this.sumTicket.islandName;
      let checkinRooms = this.sumTicket.checkinRooms;
      let vacantRooms = this.sumTicket.vacantRooms;
      let option = {
        backgroundColor: "#fff",
        legend: {
          right: "3%",
          top: "0%",
          icon: "rect",
          itemWidth: 14,
          itemHeight: 10,
          itemGap: 20,
          textStyle: {
            fontSize: 14,
            color: "#293C73",
          },
          data: ["入住情况", "空房情况"],
          selectedMode: false,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#293C73",
            },
          },
          textStyle: {
            color: "#293C73",
          },
          backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
          formatter: "{b}：{c}",
        },
        grid: {
          left: "5%",
          right: "3%",
          bottom: "1%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: islandName,
          axisPointer: {
            type: "shadow",
          },
          axisLabel: {
            color: "#293C73",
            interval: 0,
            rotate: 30,
            margin: 15,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#293C73",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          interval: 500, // 设置Y轴的间隔为500
          name: "单位：人",
          nameTextStyle: {
            color: "#293C73",
            fontSize: 14,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(45, 67, 119, 0.8)",
            },
          },
          min: 0,
          axisLabel: {
            show: true,
            color: "#293C73",
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: "rgba(45, 67, 119, .5)",
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: checkinRooms,
            name: "入住情况",
            type: "bar",
            barWidth: "10px",
            itemStyle: {
              color: "#1372FF",
              barBorderRadius: [20, 20, 0, 0],
            },
            label: {
              show: true,
              position: "top",
              fontSize: 12,
              color: "#1372FF",
              offset: [0, -5],
              formatter: "{c}",
            },
          },
          {
            data: vacantRooms,
            name: "空房情况",
            type: "bar",
            barWidth: "10px",
            itemStyle: {
              color: "#ED5656",
              barBorderRadius: [20, 20, 0, 0],
            },
            label: {
              show: true,
              position: "top",
              fontSize: 12,
              color: "#ED5656",
              offset: [0, -5],
              formatter: "{c}",
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 入岛游客年龄分布
    ageDistributionPieOne() {
      let myChart = echarts.init(document.getElementById("pieOne"));
      const value = this.ageDistributionList.childRatio;
      const rate = Math.round((value * 100) / 100);
      const option = {
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          {
            text: this.ageDistributionList.childRatio + "%",
            textStyle: {
              fontSize: 12,
              color: "#293C73",
            },
            top: "35%",
            x: "center",
          },
        ],
        polar: {
          center: ["50%", "50%"],
          radius: ["60%", "100%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [value],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            // backgroundStyle: {
            //   color: "rgba(19, 84, 146, .4)",
            // },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#0263FF",
                  },
                  {
                    offset: 1,
                    color: "#0263FF",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    ageDistributionPieTwo() {
      let myChart = echarts.init(document.getElementById("pieTwo"));

      const value = this.ageDistributionList.youngRatio;
      const rate = Math.round((value * 100) / 100);
      const option = {
        grid: {
          left: "10%",
          top: "10%",
          right: "30%",
          bottom: "10%",
        },
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          {
            text: this.ageDistributionList.youngRatio + "%",
            textStyle: {
              fontSize: 12,
              color: "#293C73",
            },
            top: "35%",
            x: "center",
          },
        ],
        polar: {
          center: ["50%", "50%"],
          radius: ["60%", "100%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [value],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            // backgroundStyle: {
            //   color: "rgba(19, 84, 146, .4)",
            // },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#35CBCB",
                  },
                  {
                    offset: 1,
                    color: "#35CBCB",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    ageDistributionPieThree() {
      let myChart = echarts.init(document.getElementById("pieThree"));

      const value = this.ageDistributionList.midRatio;
      const rate = Math.round((value * 100) / 100);
      const option = {
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          {
            text: this.ageDistributionList.midRatio + "%",
            textStyle: {
              fontSize: 12,
              color: "#293C73",
            },
            top: "35%",
            x: "center",
          },
        ],
        polar: {
          center: ["50%", "50%"],
          radius: ["60%", "100%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [value],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            // backgroundStyle: {
            //   color: "rgba(19, 84, 146, .4)",
            // },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: "#FBD438",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    ageDistributionPieFive() {
      let myChart = echarts.init(document.getElementById("pieFive"));

      const value = this.ageDistributionList.boyRatio;
      const rate = Math.round((value * 100) / 100);
      const option = {
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          {
            text: this.ageDistributionList.boyRatio + "%",
            textStyle: {
              fontSize: 12,
              color: "#293C73",
            },
            top: "35%",
            x: "center",
          },
        ],
        polar: {
          center: ["50%", "50%"],
          radius: ["60%", "100%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [value],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            // backgroundStyle: {
            //   color: "rgba(19, 84, 146, .4)",
            // },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: "#3BA1FD",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    ageDistributionPieFour() {
      let myChart = echarts.init(document.getElementById("pieFour"));
      const value = this.ageDistributionList.oldRatio;
      const rate = Math.round((value * 100) / 100);
      const option = {
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          {
            text: this.ageDistributionList.oldRatio + "%",
            textStyle: {
              fontSize: 12,
              color: "#293C73",
            },
            top: "35%",
            x: "center",
          },
        ],
        polar: {
          center: ["50%", "50%"],
          radius: ["60%", "100%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [value],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            // backgroundStyle: {
            //   color: "rgba(19, 84, 146, .4)",
            // },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: "#00AB54",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    ageDistributionPieSix() {
      let myChart = echarts.init(document.getElementById("pieSix"));
      const value = this.ageDistributionList.girlRatio;
      const rate = Math.round((value * 100) / 100);
      const option = {
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          {
            text: this.ageDistributionList.girlRatio + "%",
            textStyle: {
              fontSize: 12,
              color: "#293C73",
            },
            top: "35%",
            x: "center",
          },
        ],
        polar: {
          center: ["50%", "50%"],
          radius: ["60%", "100%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [value],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            // backgroundStyle: {
            //   color: "rgba(19, 84, 146, .4)",
            // },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: "#F2627B",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //景区概况
    setScenicOverview(scenicOptions, islandTradeAmountList) {
      let xdata = [];
      let ydata = [];
      scenicOptions.filter((item) => {
        xdata.push(item.scenicName);
        let p = islandTradeAmountList.findIndex(
          (item2) => item2.scenicSpotName == item.scenicName
        );
        if (p > -1) {
          ydata.push(islandTradeAmountList[p].totalPrice);
        } else {
          ydata.push(0);
        }
      });
      let myChart = echarts.init(this.$refs.lineChart2);
      let colors = ["rgba(11, 255, 177, 1)"];
      let option = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(1, 13, 19, 0.5)",
          borderWidth: 0,
          axisPointer: {
            lineStyle: {
              color: "#53628F",
              type: "slider",
            },
          },
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        title: {
          textStyle: {
            color: "#111",
            fontSize: 16,
          },
          x: "2%",
          y: "5px",
          text: "当日各景区核销交易金额",
        },
        grid: {
          top: "20%",
          left: "5%",
          right: "5%",
          bottom: "10%",
        },

        xAxis: [
          {
            type: "category",
            name: "",
            nameGap: 10,
            nameTextStyle: {
              // ---坐标轴名称样式
              color: "#111",
              fontSize: 15,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#111", // 更改坐标轴文字颜色
                fontSize: 12, // 更改坐标轴文字大小
              },
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#7299D4",
              },
            },
            axisTick: {
              show: false,
            },
            data: xdata,
          },
        ],
        yAxis: [
          {
            name: "单位：元",
            splitLine: {
              show: true,
              lineStyle: {
                type: [5, 10],
                dashOffset: 10,
                color: "#C6D7F1",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#111", // 更改坐标轴文字颜色
                fontSize: 12, // 更改坐标轴文字大小
              },
              formatter: function (value) {
                if (value === 0) {
                  return value;
                }
                return value;
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#7299D4",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: colors[0], // 线条颜色
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: colors[0],
              borderColor: "#646ace",
              borderWidth: 0,
            },
            tooltip: {
              show: true,
            },
            data: ydata,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 商家概况单位
    setBusinessOverview() {
      let myChart = echarts.init(this.$refs.lineChart);

      let colors = ["rgba(11, 255, 177, 1)", "rgba(45, 173, 255, 1)"];
      let option = {
        //你的代码
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(1, 13, 19, 0.5)",
          borderWidth: 0,
          axisPointer: {
            lineStyle: {
              color: "#53628F",
              type: "slider",
            },
          },
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        legend: {
          right: "4%",
          align: "left",
          top: "1%",
          type: "plain",
          textStyle: {
            color: "#53628F",
            fontSize: 12,
          },

          itemWidth: 10,
          itemHeight: 10,
          data: ["申请通过商家", "申请入驻商家", "申请未通过商家"],
        },
        grid: {
          top: "11%",
          left: "5%",
          right: "5%",
          bottom: "10%",
        },

        xAxis: [
          {
            type: "category",
            name: "",
            nameGap: 10,
            nameTextStyle: {
              // ---坐标轴名称样式
              color: "#111",
              fontSize: 15,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#111", // 更改坐标轴文字颜色
                fontSize: 12, // 更改坐标轴文字大小
              },
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#7299D4",
              },
            },
            axisTick: {
              show: false,
            },
            data: this.MerchantOverview.xAxisData,
          },
        ],
        yAxis: [
          {
            interval: 500, // 设置Y轴的间隔为500
            name: "单位：人",
            splitLine: {
              show: true,
              lineStyle: {
                type: [5, 10],
                dashOffset: 10,
                color: "#C6D7F1",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#111", // 更改坐标轴文字颜色
                fontSize: 12, // 更改坐标轴文字大小
              },
              formatter: function (value) {
                if (value === 0) {
                  return value;
                }
                return value;
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#7299D4",
              },
            },
          },
        ],
        series: [
          {
            name: "申请通过商家",
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: colors[0], // 线条颜色
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: colors[0],
              borderColor: "#646ace",
              borderWidth: 0,
            },
            tooltip: {
              show: true,
            },
            data: this.MerchantOverview.passNumsData,
          },
          {
            name: "申请入驻商家",
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: colors[1], // 线条颜色
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: colors[1],
              borderColor: "#646ace",
              borderWidth: 0,
            },
            tooltip: {
              show: true,
            },
            data: this.MerchantOverview.waitNumsData,
            // data: [1, 2, 3]
          },
          {
            name: "申请未通过商家",
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: "#FF6262", // 线条颜色
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: "#FF6262",
              borderColor: "#646ace",
              borderWidth: 0,
            },
            tooltip: {
              show: true,
            },
            data: this.MerchantOverview.unPassedNumsData,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 入岛游客来源分布
    setFromStatistics() {
      let myChart = echarts.init(this.$refs.fromStatistics);
      let option = {
        backgroundColor: "#fff",
        tooltip: {
          showContent: true,
          trigger: "axis",
          backgroundColor: "rgba(8,36,68,.7)",
          color: "#fff",
          textStyle: {
            color: "#fff",
          },
        },
        textStyle: {
          color: "#c0c3cd",
          fontSize: 14,
        },
        legend: {
          top: "0",
          right: "3%",
          itemWidth: 13,
          itemHeight: 13,
          icon: "rect",
          padding: 0,
          textStyle: {
            color: "#c0c3cd",
            fontSize: 13,
            padding: [2, 0, 0, 0],
          },
        },
        grid: {
          top: "11%",
          left: "5%",
          right: "5%",
          bottom: "10%",
        },
        xAxis: {
          axisTick: {
            show: false,
          },
          nameTextStyle: {
            color: "#c0c3cd",
            padding: [0, 0, -10, 0],
            fontSize: 14,
          },
          axisLabel: {
            // rotate: '45',
            formatter: function (value) {
              if (value.length > 3) {
                return `${value.slice(0, 2)}...`;
              }
              return value;
            },
            textStyle: {
              width: "20",
              color: "#639FD2", //坐标轴字颜色
            },
            margin: 15,
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          splitLine: {
            //网格线
            show: false,
          },
          data: this.toWhere.xAxisName,
          type: "category",
        },
        yAxis: {
          interval: 500, // 设置Y轴的间隔为500
          name: "单位：人",
          nameTextStyle: {
            color: "#53628F",
            fontSize: 12,
          },
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#11417a",
            },
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            //网格线
            show: true,
            lineStyle: {
              color: "rgba(108, 166, 219, 0.1)",
              type: "solid",
            },
          },
        },
        series: [
          {
            name: "当月",
            type: "bar",
            silent: true,
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [7, 7, 0, 0], // 圆角（左上、右上、右下、左下）
                color: "#F44",
              },
            },
            barMaxWidth: "auto",
            label: {
              show: true,
              position: "top",
              distance: 10,
              color: "#F44",
              fontSize: 13,
            },
            data: this.toWhere.monthVsNum,
          },
          {
            name: "当日",
            data: this.toWhere.dayVsNum,
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 10,
            itemStyle: {
              barBorderRadius: [7, 7, 0, 0], // 圆角（左上、右上、右下、左下）
              color: "#1372FF",
            },
            label: {
              show: true,
              position: "top",
              distance: 10,
              color: "#1372FF",
              fontSize: 13,
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.page {
  background: #f1f5f9;

  .sailSituation {
    display: flex;
    gap: 20px;
    padding: 15px 19px;

    .item {
      width: 25%;
      flex: 1;
      height: 74px;
      background-color: #fafbfe;
      padding: 15px 0 0 13px;
      border-radius: 6px;

      p {
        margin: 0;

        &:first-child {
          font-size: 20px;
          line-height: 20px;
          color: #333;
          font-weight: bold;
          position: relative;
          padding-left: 16px;

          &::after {
            position: absolute;
            content: "";
            display: block;
            border-radius: 100%;
            background-color: #ff9d00;
            width: 8px;
            height: 8px;
            left: 0;
            top: 6px;
          }
        }

        &:last-child {
          color: #4a5773;
          font-size: 14px;
          margin-top: 9px;
        }
      }
    }
  }

  .tjData {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    padding: 15px;

    .item {
      background-color: #fafbfe;
      padding: 20px;
      border-radius: 6px;

      p {
        margin: 0;

        &:first-child {
          font-size: 21px;
          color: #1f78fb;
          font-weight: bold;
        }

        &:last-child {
          color: #111;
          margin-top: 5px;
        }
      }
    }
  }

  .card_header {
    color: #293c73;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f1f1f1;

    .left {
      display: flex;
      align-items: center;
    }
  }

  .header {
    display: flex;
    justify-content: space-between;
    padding: 30px 0 30px 26px;

    .card {
      background: #fff;
      width: 33%;
      border-radius: 10px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .left {
        color: #293c73;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 14px;

        &.ts {
          padding: 0 30px 0 7px;
          margin: 0;
          border-right: 1px solid #eee;
        }

        .name {
          font-size: 14px;
          margin-top: 8px;
          color: #293c73;
        }

        .num {
          font-size: 24px;
          font-weight: bold;
        }
      }
    }
  }

  .icon {
    height: 20px;
    width: 18px;
  }

  .title {
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #293c73;
  }

  .title1 {
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #293c73;
    margin: 20px 10px;
    display: block;
  }

  .mid {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 10px;

    .midCard {
      width: 49%;
      background: #fff;
      border-radius: 10px;

      .chart {
        position: relative;

        .table {
          width: 56%;
        }

        &_div {
          display: flex;
          flex-direction: row;
        }

        .sailSumPie {
          height: 295px;
          width: 44%;
        }
      }

      .sailSituation2 {
        position: absolute;
        left: 170px;
        top: -4px;
        z-index: 1;
      }

      &_header {
        color: #293c73;

        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 15px;

        .left {
          display: flex;
          align-items: center;
          margin-right: 14px;
        }
      }
    }
  }
}

.main {
  background: #fff;
  width: 99%;
  align-items: center;
  margin: auto;
  margin-top: 10px;
  border-radius: 10px;

  &_bottom {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .fromStatistics {
      // width: 48%;

      &_main {
        display: flex;
        margin: 0 20px 20px;
        flex-direction: row;
        width: 100%;

        .right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 52px;
          width: 100%;

          .month {
            border-radius: 10px;
            width: 100%;
            height: 44%;
            background: url("../../assets/index/15.png");
            background-size: cover;
            padding: 30px;
            color: #293c73;
          }

          .days {
            padding: 30px;
            background: url("../../assets/index/14.png");
            width: 100%;
            height: 44%;
            background-size: cover;
            border-radius: 10px;
            color: #293c73;
          }
        }

        .left {
          flex-direction: row;
          display: flex;

          .bg {
            text-align: center;
            line-height: 43px;
            display: inline-block;
            background: url("../../assets/index/13.png");
            width: 43px;
            height: 43px;
            background-size: cover;
            color: #63acc3;
          }

          .bg1 {
            background: url("../../assets/index/10.png");
            width: 43px;
            height: 43px;
            background-size: cover;
            display: inline-block;
          }

          .bg2 {
            background: url("../../assets/index/11.png");
            width: 43px;
            height: 43px;
            background-size: cover;
            display: inline-block;
          }

          .bg3 {
            background: url("../../assets/index/12.png");
            width: 43px;
            height: 43px;
            background-size: cover;
            display: inline-block;
          }
        }
      }
    }

    .enterNum {
      width: 50%;

      .fromStatisticsChart {
        width: 100%;
        height: 350px;
      }
    }
  }

  .pt5 {
    padding-top: 15px;
  }

  &_mid {
    .ageDistributionList {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
    }

    .ageDistribution {
      height: 110px;
      width: 15%;
      padding: 20px 15px;
      border-radius: 6px;
      background: #fafbfe;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .ageDistributionPie {
        // height: 100px;
        width: 60%;
      }

      &_left {
        width: 34%;

        .font1 {
          font-size: 16px;
          font-weight: bold;
          color: #293c73;
        }

        .sum {
          font-size: 14px;
          color: #b9c2d0;
        }
      }
    }
  }
}

.bottom {
  background: #fff;
  width: 99%;
  align-items: center;
  margin: auto;
  margin-top: 10px;
  border-radius: 10px;
  padding-bottom: 15px;

  .lineChart {
    width: 100%;
    height: 350px;
  }

  .digitalShow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px 20px;

    .left {
      width: 59%;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      color: #53628f;
    }
  }
}
</style>
